<template>
    <div>
        <table border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>
                        <input type='checkbox' v-model="checkedall" /> 全选
                    </th>
                    <th>
                        商品名称
                    </th>
                    <th>
                        商品价格
                    </th>
                    <th>
                        商品的数量
                    </th>
                    <th>小计</th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in goodslist">
                    <td>
                        <input type='checkbox' v-model="item.checked" @change="checkedFn" />
                    </td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="item.num--" :disabled="item.num == 1">-</button>
                        <span>{{ item.num }}</span>
                        <button @click="item.num++">+</button>
                    </td>
                    <td>{{ item.price * item.num }}</td>
                    <td>
                        <button @click="delFn(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>总价:{{ totalPrice }}</p>
    </div>
</template>

<script>
// 计算属性的语法:
// 简写方法: 使用时不能修改该计算属性, 否则有警告
// computed:{
// 计算属性(){
//         retrun 值
// }
// }

// 常规的写法: 可以使用也可以赋值
// computed:{
// 计算属性:{
//     get(){
// return 值
// } ,
// set(val){

//     }    
// }
// }

export default {
    data() {
        return {
            goodslist: [
                {
                    id: 1,
                    name: '雅诗兰黛粉底液',
                    price: 800,
                    num: 2,
                    checked: false
                },
                {
                    id: 2,
                    name: '兰蔻小黑瓶',
                    price: 600,
                    num: 1,
                    checked: true
                },
                {
                    id: 3,
                    name: '迪奥口红',
                    price: 400,
                    num: 3,
                    checked: true
                },
                {
                    id: 4,
                    name: '海蓝之谜',
                    price: 900,
                    num: 2,
                    checked: true
                }
            ],

        }
    },
    computed: {
        // 计算属性的简写方式: 其实就相当于get 方法
        // checkedall() {
        //     return this.goodslist.every(item => item.checked)
        // }

        // 计算属性的常规写法
        checkedall: {  // 全选
            get() { // 当你使用计算属性的时候, 触发的是get 方法
                console.log('get');
                return this.goodslist.every(item => item.checked)
            },
            set(val) { //当你修改计算属性的时候, 触发set 方法,形参val 就是修改后的值
                console.log('set');
                console.log(val);
                this.goodslist.forEach(item => {
                    item.checked = val
                })
            }
        },
        totalPrice() {
            let sum = 0
            this.goodslist.forEach(item => {
                if (item.checked) {
                    sum += item.price * item.num
                }
            })
            return sum
        }
    }
}
</script>
<style scoped></style>